<template>
    <div class="box">
        <div style="width: 100%;height: 50px;position: relative;background-color:red;position: fixed;top: 0;left: 0;z-index: 999">
            <div style="width: 100%;height: 5vh;">
                <div class="fanHui"><van-icon name="arrow-left" />
                    <span @click="back">返回</span>
                </div>
            </div>
            <span style="position: absolute;top: 10px;left: 45%;color: white;font-size: 18px;">精品歌曲</span>
        </div>
        <div class="songsBox">
            <div>
                <!--                歌词-->
                <div id="geciBox" style="height: 35%">
                    <div id="outer" style="height: 100%;overflow: scroll">
                        <div class="geCi" v-if="isplay"><p id="geciP" v-for="(item,index) in arr4" :key="index" >{{item}}</p></div>
                    </div>
                </div>
                <div class="songs">
                    <!--                    歌曲列表-->
                    <li class="songName" v-for="(item) in arr" :key="item.id" @click="content(item.id)">
                        <span :class="id == item.id?'bianlv':'bianhei'">{{item.name}}</span>
                        <div id="bianhua" style="float:right;" :class="id == item.id?'bianlv':'bianhei'">
                            <van-icon class="tuBiao bofang" id="tubiao1" :class="id2 == item.id?'haha':'hehe'"  name="play-circle-o"/>
                            <van-icon @click.stop="contents(item.id)" id="tubiao2" class="tuBiao zanting" :class="id2 == item.id?'hehe':'haha'"  name="pause-circle-o"/>
                        </div>
                    </li>
                </div>
            </div>
            <!--            上一首下一首-->
            <div style="height: 5%;position: relative;">
                <p @click="last" style="position: absolute;top: 0;left: 8%;height: 100%;width: 65px;line-height: 31px;text-align: center;">上一首<van-icon name="arrow-left" /></p>
                <p style="position: absolute;top: 0;left: 25%;height: 100%;width: 50%;line-height: 31px;text-align: center;">
                    <van-notice-bar scrollable style="color: #42b983;font-size: 18px" :text="title" />
                </p>
                <p @click="nextSong" style="position: absolute;top: 0;right: 7%;height: 100%;width: 65px;line-height: 31px;text-align: center;">下一首<van-icon name="arrow" /></p>
            </div>
            <div style="height: 10%">
                <audio v-if="isplay" ref="audioDom" :src="url1" loop autoplay controls style="width: 100%"></audio>
                <div style="height: 100%;width: 100%;text-align: center;line-height: 50px" v-else>暂无歌曲来源</div>
            </div>
        </div>
        <div class="beijingBox" :style="{'background-image':'url('+img+')'}"></div>
    </div>
</template>

<script>
    export default {
        name: "mv",
        data(){
            return{
                arr:[],
                music:[],
                url1:"",
                isplay:true,
                img:"",
                text1:"",
                arr2:[],
                arr3:[],
                arr4:[],
                text2:"",
                id:"",
                id2:"",
                title:"",
                next:[],
                num:0,
                str:1,
            }
        },
        created() {
            let id = this.$route.query.id
            this.$axios.get(`/music-api/artists?id=${id}`).then((res)=>{
                console.log(res.data)
                this.arr = res.data.hotSongs
                this.img = res.data.artist.img1v1Url
                this.title = res.data.artist.briefDesc
                this.next = []
                for(let i = 0;i<this.arr.length;i++){
                    // console.log(this.arr[i].id)
                    this.next.push(this.arr[i].id)
                }
            })
        },
        methods:{
            //歌曲的url

            back(){
              this.$router.push('/myapp/ranVideo')
            },
            content(id){
                this.$axios.get(`/music-api/song/url?id=${id}`).then((res)=>{
                    console.log(res.data.data)
                    this.music = res.data.data
                    this.id = id
                    this.id2 = id
                    console.log(id)
                    console.log(this.id)
                    for(let i = 0;i<this.music.length;i++){
                        this.url1 = this.music[i].url
                    }
                    // console.log(this.id)
                    //判断url为空的情况
                    if(this.url1 == null){
                        this.isplay = false
                        console.log(123)
                    }else if(this.url1 !=null){
                        this.isplay = true
                    }
                    this.$refs["audioDom"].play();
                })
                //歌词
                this.$axios.get(`/music-api/lyric?id=${id}`).then((res)=>{
                    // console.log(res)
                    this.text1 = res.data.lrc.lyric
                    this.arr2 = this.text1.split("[")
                    this.arr4 = []
                    for(let i =0;i<this.arr2.length;i++){
                        this.arr3 = this.arr2[i].split("]")
                        this.arr4.push(this.arr3[1])
                        this.text2 = this.arr3[1]
                    }
                })
            },
            //暂停歌曲
            contents(id){
                console.log(id)
                console.log(this.id)
                this.id = id
                this.id2 = this.str
                console.log(this.id)
                this.$refs["audioDom"].pause();
            },
            // 下一首
            nextSong(){
                // console.log(this.next[j])
                // console.log(this.id)
                // console.log(this.next.indexOf(this.id))
                // this.num = this.next.indexOf(this.id)+1
                this.num = this.next.indexOf(this.id)
                this.num++
                console.log(this.num)
                this.id = this.next[this.num]
                this.id2 = this.next[this.num]
                if(this.num == 50){
                    this.num = this.next.indexOf(this.next[0])
                }
                //请求歌曲的url
                this.$axios.get(`/music-api/song/url?id=${this.next[this.num]}`).then((res)=>{
                    // console.log(res.data.data)
                    this.music = res.data.data
                    // this.id = id
                    for(let i = 0;i<this.music.length;i++){
                        this.url1 = this.music[i].url
                    }
                    //判断url为空的情况
                    if(this.url1 == null){
                        this.isplay = false
                        console.log(123)
                    }else if(this.url1 !=null){
                        this.isplay = true
                    }

                })
                //歌词
                console.log(this.id)
                this.$axios.get(`/music-api/lyric?id=${this.next[this.num]}`).then((res)=>{
                    // console.log(res)
                    this.text1 = res.data.lrc.lyric
                    this.arr2 = this.text1.split("[")
                    this.arr4 = []
                    for(let i =0;i<this.arr2.length;i++){
                        this.arr3 = this.arr2[i].split("]")
                        this.arr4.push(this.arr3[1])
                        this.text2 = this.arr3[1]
                    }
                })
            },
            //上一首
            last(){
                this.num--
                // console.log(this.num)
                // console.log(this.next.lastIndexOf(this.next[this.next.length-1]))
                if(this.num < 0){
                    this.num = this.next.lastIndexOf(this.next[this.next.length-1])
                }
                this.id = this.next[this.num]
                this.id2 = this.next[this.num]
                this.$axios.get(`/music-api/song/url?id=${this.next[this.num]}`).then((res)=>{
                    // console.log(res.data.data)
                    this.music = res.data.data
                    // this.id = id
                    for(let i = 0;i<this.music.length;i++){
                        this.url1 = this.music[i].url
                    }
                    //判断url为空的情况
                    if(this.url1 == null){
                        this.isplay = false
                        console.log(123)
                    }else if(this.url1 !=null){
                        this.isplay = true
                    }

                })
                //歌词
                this.$axios.get(`/music-api/lyric?id=${this.next[this.num]}`).then((res)=>{
                    // console.log(res)
                    this.text1 = res.data.lrc.lyric
                    this.arr2 = this.text1.split("[")
                    this.arr4 = []
                    for(let i =0;i<this.arr2.length;i++){
                        this.arr3 = this.arr2[i].split("]")
                        this.arr4.push(this.arr3[1])
                        this.text2 = this.arr3[1]
                    }
                })
            }
        }
    }

</script>

<style scoped>
    *{
        padding: 0;
        margin: 0;
    }
    li{
        list-style: none;
    }
    .fanHui{
        height: 100%;
        margin-left: 10px;
        line-height: 50px;
        z-index: 333;
        color:white;
        font-size: 18px;
    }
    .tuBiao{
        font-size: 18px;
    }
    .box{
        display: flex;
        position: relative;
        height: 100vh;
    }
    .songsBox{
        display: flex;
        flex-direction: column;
        margin-top: 35px;
        width: 100%;
        max-height: 95vh;
    }
    .songsBox>div:first-child{
        display: flex;
        flex-direction: column;
        height: 85%;
    }
    .beijingBox{
        position: absolute;
        top: 33px;
        left: 0;
        width: 100%;
        min-height: 95vh;
        background-repeat: no-repeat;
        background-size: 150% 100%;
        opacity: 0.7;
        z-index: -1;
    }
    .songs{
        /*position: relative;*/
        margin-bottom: 5px;
        height: 65%;
        overflow: scroll;
    }
    .songName{
        /*margin-top: 1px;*/
        padding: 0 7% 0 7%;
        height: 35px;
        line-height: 35px;
        white-space:nowrap;
        overflow: hidden;
        text-overflow:ellipsis;
    }
    /deep/.van-notice-bar{
        height: 100%;
    }
    /deep/.van-notice-bar{
        background-color: rgba(0,0,0,0);
    }
    .geCi{
        text-align: center;
    }
    #geciP{
        height: 25px;
        line-height: 25px;
        white-space:nowrap;
        overflow: hidden;
        text-overflow:ellipsis;
    }
    .haha {
        display: none;
    }
    .hehe {
        display: block;
    }
    /*.zanting{*/
    /*    display: block;*/
    /*}*/
    .bianlv{
        color: #42b983;
    }
    .bianhei{
        color: black;
    }
</style>